<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿京东网页制作</title>
		<link rel="stylesheet" type="text/css" href="jd.css">
	</head>
	<body>
	<div id="div1">
		<div id="div2">
			<div id="div3">
				<img src="images/1.png" calss="t1">
				<img src="images/2.png" calss="t1">
				<img src="images/3.png" calss="t1">
			</div>
		</div>
		<ul id="u1">
				<li id="l1">地址</li>
				<li id="l2">您好,请登录</li>
				<li id="l3">免费注册|</li>
				<li id="l4">我的订单|</li>
				<li id="l4">我的京东|</li>
				<li id="l4">京东会员|</li>
				<li id="l4">企业采购|</li>
				<li id="l4">客户服务|</li>
				<li id="l4">网站导航|</li>
			</ul>
			<div id="div4">
				<table id="table">
					<tr>
						<td>北京</td><td>上海</td><td>天津</td><td>重庆</td><td>河北</td>
					</tr>
					<tr>
						<td>山西</td><td>河南</td><td>辽宁</td><td>吉林</td><td>黑龙江</td>
					</tr>
					<tr>
						<td>内蒙古</td><td>江苏</td><td>山东</td><td>安徽</td><td>浙江</td>
					</tr>
					<tr>
						<td>福建</td><td>湖北</td><td>湖南</td><td>广东</td><td>广西</td>
					</tr>
					<tr>
						<td>西藏</td><td>陕西</td><td>甘肃</td><td>青海</td><td>宁夏</td>
					</tr>
					<tr>
						<td>新疆</td><td>香港</td><td>澳门</td><td>云南</td><td>海外</td>
						<tr>
						<td>江西</td><td>四川</td><td>海南</td><td>贵州</td><td>台湾</td>
					</tr>
					</tr>
				</table>
				<div id="div5">
					<h3>用户登录界面</h3>
					<hr/>
					<form action="URL" autocomplete="on">
						<label>用户名：<input type="text" required placeholder="请输入用户名"><br>
						<label>密码：<input type="password" required placeholder="请输密码"><br>
							<button>登陆</button>
					</form>
				</div>
				<div id="div6">
					<h3>用户注册界面</h3>
					<hr/>
					<form action="URL" autocomplete="on">
						<label>用户名：<input type="text" required placeholder="请输入用户名">
							<br>
						</label>
						<label>密码：<input type="password" required placeholder="请输密码">
							<br>
						</label>
						<label>确认密码：<input type="password" required placeholder="请再次输入相同密码">
							<br>
						</label>
						<label>电话号码：<input type="number" required placeholder="请输入电话号码">
							<br>
						</label>
						<label>验证码：<input type="number" required placeholder="请输入验证码">
							<br>
						</label>
						<input type="text" id="input1">
							<br>
						<button>提交</button>
						<span p onclick="test()">再次获取验证码</span>
					</form>
				</div>
				<input type="text" id="input2"><p id="p1">搜索</p>
			</div>
			<div id="div7"><marquee>舒适休闲风&nbsp &nbsp新飞行城堡&nbsp &nbsp工业品嗨购&nbsp &nbsp超市粮油节</marquee></div>
			<ul id="u2">
				<li>满100减50</li>
				<li>高效农机</li>
				<li>赠显示器</li>
				<li>扇贝</li>
				<li>家清节</li>
				<li>抢神券</li>
				<li>乐享旅途</li>
			</ul>
			<div id="div8">
				<p><img src="images/4.png" style="align:middle;">我的购物车：<input type="text"></p>
				<img src="images/5.png" id="img1">
			</div>
			<div id="div9">
					<ul id="u3">
						<li>秒杀</li>
						<li>优惠券</li>
						<li>PLUS会员</li>
						<li>闪购|</li>
						<li>拍卖</li>
						<li>京东时尚</li>
						<li>京东超市</li>
						<li>京东生鲜|</li>
						<li>海囤全球</li>
						<li>京东金融</li>
					</ul>
					<img src="images/6.png">
				</div>
				<div id="section">
					<div class="left">
						<ul>
							<li><a href="#">家用电器</a></li>
							<li><a href="#">手机/营运商/数码</a></li>
							<li><a href="#">电脑/办公</a></li>
							<li><a href="#">家居/家具/厨具/家装</a></li>
							<li><a href="#">男装/女装/童装/内衣</a></li>
							<li><a href="#">美妆/个人清洁/护肤</a></li>
							<li><a href="#">女鞋/箱包/珠宝/手表</a></li>
							<li><a href="#">男鞋/运动/户外</a></li>
							<li><a href="#">房产/汽车/汽车用品</a></li>
							<li><a href="#">食品/酒类/特产</a></li>
							<li><a href="#">艺术/礼品/鲜花</a></li>
							<li><a href="#">图书/文艺/电子品</a></li>
							<li><a href="#">机票/旅行/酒店</a></li>
							<li><a href="#">理财/众筹/白条</a></li>
						</ul>
					</div>
					<div class="main">
					   <div id="d1">
						  <img src="images/b1.png" class="t1">
						  <img src="images/b2.png" class="t1">
						  <img src="images/b3.png" class="t1">
						  <img src="images/b4.png" class="t1">
						  <img src="images/b5.png" class="t1">
						  <img src="images/b6.png" class="t1">
						  <img src="images/b7.png" class="t1">
					    </div>
					    <ul id="u4">
					    	<li class="l4">1</li>
					    	<li class="l4">2</li>
					    	<li class="l4">3</li>
					    	<li class="l4">4</li>
					    	<li class="l4">5</li>
					    	<li class="l4">6</li>
					    	<li class="l4">7</li>
					    </ul>
				    </div>
					<div class="right">
						<img src="images/r1.png" style="height:250px;">
						<img src="images/r2.png" style="height:250px;">
					</div>
					<div class="right1">
						<p><img src="images/r4.png"><br><span>Hi,欢迎京东商城！</span><br>
							<span style="font-size:20px;color:red;"><a href="#"><b>登录</b></a></span>
							<span style="font-size:20px;color:red;"><a href="#"><b>注册</b></a></span><br><br>
							<span style="font-size:15px" class="span1">新人福利</span>
							<span style="font-size:15px" class="span1">PULS会员</span>
						</p>
					</div>
					<div class="right2">
						<p>京东快报</p>
						<p><a href="#"><b style="background:red; margin-left: 5px">热议</b>华为5G收费标准...
						</a></p>
						<p><a href="#"><b style="background:red; margin-left: 5px">热门</b>
							6100mAh锂电池手机
						</a></p>
						<p><a href="#"><b style="background:red; margin-left: 5px">推荐</b>
							新iphone手机发布会,
						</a></p>
						<p><a href="#"><b style="background:red; margin-left: 5px">热议</b>官宣好消息,华为手机</a></p>
						<hr style="width:90%;height:3px;background-color:blue;">
						<img src="images/r6.png">
						<img src="images/r7.png">
						<img src="images/r8.png">
						<img src="images/r9.png">
						<img src="images/r10.png">
						<img src="images/r11.png">
						<img src="images/r12.png">
						<img src="images/r5.png">
						<img src="images/r13.png">
						<img src="images/r14.png">
					</div>
				</div>
				<hr style="width:100%;height:3px;background-color:gray;">
				<div id="d2">
					<div id="d2-1">
						<span id="p1">京东秒杀</span><br>
						<span id="p2">FLASH DEALS</span>
						<span id="p3">本场距离结束还剩</span>
						<div id="shi1"></div>
						<div id="shi2"></div>
						<div id="shi3"></div>
					</div>
					<div id="qianggou">
						
					</div>
					<div id="zhanshi">
						<div id="nvzhuang">
						  <a href="#"><img src="images/s1.png"></a>
						  <a href="#"><img src="images/s2.png"></a>
						  <a href="#"><img src="images/s3.png"></a>
					    </div>
					</div>
				</div>
				<div id="box">
			<ul>
				<li><img src="images/r1.png" style="width:200px;height:200px">
				</li>
				<li><img src="images/s1.png" style="width:200px;height:200px">
				</li>
				<li><img src="images/s2.png" style="width:200px;height:200px">
				</li>
				<li><img src="images/s3.png" style="width:200px;height:200px">
				</li>
				<li><img src="images/z1.png" style="width:200px;height:200px">
				</li>
				<li><img src="images/z8.png" style="width:200px;height:200px">
				</li>
			</ul>
		</div>
	</div>
	<script>
		var div3=document.getElementById("div3");
		var t1=document.querySelectorAll("t1");
		var num=0;
		function lunbo(){
			num++;
			if(num==3){
				num=0;
			}
			div3.style.left=-120*num+"px";
		}
		var timer1=setInterval(lunbo,2000);
		var l1=document.getElementById("l1");
		var tb=document.getElementById("table");
		l1.onmouseover=function(){
			tb.style.display="block";
		}
		l1.onmouseout=function(){
			tb.style.display="none";
		}
		tb.onmouseover=function(){
			tb.style.display="block";
		}
		tb.onmouseout=function(){
			tb.style.display="none";
		}
		var l2=document.getElementById("l2");
		var div5=document.getElementById("div5");
		l2.onmouseover=function(){
			div5.style.display="block";
		}
		l2.onmouseout=function(){
			div5.style.display="none";
		}
		div5.onmouseover=function(){
			div5.style.display="block";
		}
		div5.onmouseout=function(){
			div5.style.display="none";
		}
		var l3=document.getElementById("l3");
		var div6=document.getElementById("div6");
		l3.onmouseover=function(){
			div6.style.display="block";
		}
		l3.onmouseout=function(){
			div6.style.display="none";
		}
		div6.onmouseover=function(){
			div6.style.display="block";
		}
		div6.onmouseout=function(){
			div6.style.display="none";
		}
		function test(){
			var input=document.getElementById("input1");
			var arr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f","g","h","j","k","l","m","n","o","p","q","r","s","x","t","y","z","v","u","w","i"];
			var str=[];
			for(var i=0;i<6;i++){
				var testNum=Math.ceil(Math.random()*arr.length-1);
				 str.push(arr[testNum]);
			}
			var ll=str.join("")
			input.value=ll;
		}
		test()
		var d=document.getElementById("d1");
		var imgss=document.querySelectorAll(".t1");
		var l4=document.querySelectorAll(".l4");
		var n=0;
		var len=imgss.length;
		//自动播放
		function lunbo2(){
			if(n==6){
				n=0;
			}
			 n++;
			    for(var i=0;i<len;i++){
				 imgss[i].style.display="none";
				 l4[i].style.background="blue";
			    }
			   imgss[n].style.display="block";
			   l4[n].style.background="yellow";
		    }
		  var timer2=setInterval(lunbo2,2000);
		  //手动播放
		    for(var i=0;i<len;i++){
			  l4[i].index=i;
			 l4[i].onmouseover=function(){
				 for(var j=0;j<len;j++){
					 l4[j].style.backgroundColor="blue";
					 imgss[j].style.display="none";
				    }
				    l4[this.index].style.backgroundColor="red";
					imgss[this.index].style.display="block";
					clearInterval(timer2);
			    }
			    l4[i].onmouseout=function(){
			        timer2=setInterval(lunbo2,2000);

			    }
		}
		function shijian(){
			var shi1=document.getElementById("shi1");
			var shi2=document.getElementById("shi2");
			var shi3=document.getElementById("shi3");
			var date=new Date();
			var hours=date.getHours();
			var minutes=date.getMinutes();
			var seconds=date.getSeconds();
			if(seconds<10){
				seconds="0"+seconds;
			}
			if(minutes<10){
				minutes="0"+minutes;
			}
			shi1.innerHTML=hours;
			shi2.innerHTML=minutes;
			shi3.innerHTML=seconds;
		}
		var tmer3=setInterval(shijian,1000);
	</script>
	</body>
</html>